<!-- 首页 -->
<template>
    <div class="box">
        <div class="title">
            <h2>您好！ {{ text }}</h2>
            <div class="time">{{ time }}</div>
        </div>
        <!-- 头像 -->
        <div class="head_sculpture">
            <img src="../assets/tou.jpg" @click="ToUpdate">
        </div>
        <div class="massage">
            <el-button type="primary" @click="dialogVisible = true">新增学生</el-button>
            <el-dialog title="学生信息" :visible.sync="dialogVisible" width="30%">
            
            </el-dialog>
            <el-tabs v-model="active">
                <!-- 学生信息 -->
                <el-tab-pane label="学生信息" name="first">
                    <el-table :data="students">
                        <el-table-column label="id" prop="id"></el-table-column>
                        <el-table-column label="学生姓名" prop="name"></el-table-column>
                        <el-table-column label="年龄" prop="age"></el-table-column>
                        <el-table-column label="性别" prop="gender"></el-table-column>

                        <el-table-column label="操作" fixed="right" align="center">
                            <template slot-scope="scope">
                                <el-button size="medium" type="danger" v-on:click="delGood(scope.row.id)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>

                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script>
import { getALLStudent, deleteStudent } from '@/api/student'
export default ({
    data() {
        return {
            text: "管理员",
            imageUrl: '',
            active: 'first',
            students: [],
            time: '',
            dialogVisible:false
        }
    },

    methods: {
        // 获取全部学生
        getAll() {
            getALLStudent().then(res => {
                // 将数据转换为Base64编码
                this.students = res

            })
        },

        // 点击打开文件选择器
        ToUpdate() {

        },

        // 更新时间函数
        update() {
            var date = new Date()
            this.time = date.getFullYear() + '年' +
                (date.getMonth() + 1) + '月' +
                date.getDate() + '日' +
                date.toLocaleTimeString()
        },

        // 删除学生
        delGood(id) {
            deleteStudent(id).then(res => {
                console.log(res)
                this.$message.success("删除成功！")
                this.getAll()
            })
        },

        // 新增学生
        addStudent(){

        }
    },

    mounted() {
        setInterval(() => {
            this.update()
        }, 1000)
    },

    created() {
        this.getAll()
    }
})
</script>

<style scoped>
.box {
    position: relative;
    width: 100%;
    margin: 0 auto;
}


.head_sculpture {
    position: absolute;
    right: 0;
    top: 0;
    width: 300px;
    height: 300px;
}

.head_sculpture img {
    width: 70px;
    height: 70px;
    border-radius: 50%;
}

.massage {
    margin-top: 30px;
}

.time {
    font-size: 20px;
    margin: 15px 0 20px 0;
}
</style>